<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-easyinput
          prefixIcon="search"
          v-model="keyword"
          placeholder="搜索机构/医生"
          @confirm="handleSearch"
      ></uni-easyinput>
    </view>

    <!-- 机构列表 -->
    <view class="org-list">
      <scroll-view scroll-y="" class="scroll-view">
        <view class="org-card" v-for="org in orgList" :key="org.id" @click="selectOrg(org)">
          <image class="org-icon" src="/static/hospital-icon.png" mode="aspectFit"></image>
          <view class="org-info">
            <text class="org-name">{{ org.orgName }}</text>
            <text class="org-address">{{ org.orgAddress }}</text>
          </view>
          <uni-icons class="arrow-icon" type="right" size="16" color="#999"></uni-icons>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import UniLoadMore from "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {queryAll} from "../../api/organization";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  name: "SignOnline",
  components: {UniIcons, UniEasyinput, UniLoadMore},
  data() {
    return {
      keyword: '', // 搜索关键词
      orgList: [ // 模拟机构数据
      ],
      loadStatus: 'more', // 加载状态: more, loading, noMore
    }
  },
  onLoad() {
    this.fetchOrgData();
  },
  methods: {
    // 处理搜索
    handleSearch() {
      console.log("正在搜索:", this.keyword);
      // 这里可以调用API根据关键词进行搜索
    },
    // 选择机构，跳转到详情页
    selectOrg(org) {
      console.log("选择了机构:", org.orgName);
      uni.navigateTo({
        // URL中可以带上机构ID，方便详情页查询
        url: `/pages/sign/orgDetail?id=${org.id}`
      });
    },
    // 模拟从API获取数据
    async fetchOrgData() {
      this.loadStatus = 'loading';
      let {data:data} = await queryAll()
      console.log(data.data)
      this.orgList = data.data
    }
  },
  // 监听上拉触底事件，用于加载更多
  onReachBottom() {
    if (this.loadStatus === 'more') {
      this.fetchOrgData();
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.org-list {
  flex: 1;
  overflow: hidden;
}

.scroll-view {
  height: 100%;
}

.org-card {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  margin: 20rpx 20rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.org-card:active {
  transform: scale(0.98);
  background-color: #fafafa;
}

.org-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.org-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.org-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-address {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow-icon {
  margin-left: 20rpx;
}
</style>
